<template>
	<view class="order_pay">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{total}}</text>
			<view class="other_price">
				<text v-if="order_price>0">订单金额：￥{{order_price}}</text>
				<text v-if="coupon_money>0">优惠：￥{{coupon_money}}</text>
				<text v-if="freight_money>0">运费：￥{{freight_money}}</text>
			</view>
		</view>
		
		<view class="pay-type-list">
		
			<view class="type-item" @click="changePayType(1)">
				<text class="icon qwicon qwweixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#ea1f22" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<!-- 不是小程序都显示支付宝 -->
			<!-- #ifndef MP -->
				<view class="type-item" @click="changePayType(2)">
					<text class="icon qwicon qwiconzhi01"></text>
					<view class="con">
						<text class="tit">支付宝支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#ea1f22" :checked='payType == 2' />
						</radio>
					</label>
				</view>
			<!-- #endif -->
			<view class="type-item" @click="changePayType(3)">
				<text class="icon qwicon qwpyqianbao"></text>
				<view class="con">
					<text class="tit">预存款支付</text>
					<text>可用余额 ¥{{userInfo.money}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#ea1f22" :checked='payType == 3' />
					</radio>
				</label>
			</view>
		</view>
		
		<text class="mix-btn" @click="confirm">确认支付</text>
		
		<put-password :text="text" ref="put_password" @password="check"></put-password>
	</view>
</template>

<script>
	import putPassword from '@/components/put_password';
	export default {
		components:{
			putPassword
		},
		data() {
			return {
				payType: 1,
				userInfo:{
					money:0.00,
				},
				orderInfo: {},
				params:'',
				order_price:0.00,
				total:0.00,
				freight_money:0.00,
				coupon_money:0.00,
				text:'支付密码，默认1-6',
				pay_password:'',
			};
		},
		onLoad(opt) {
			this.params = opt.params
			this.create_order_before()
			this.checkLogin();
		},
		methods:{
			//选择支付方式
			changePayType(type) {
				this.payType = type;
				if(type==3){
					return this.put_password();
				}
			},
			confirm(){
				let payType = 'wxpay';
				if(this.payType==1){
					payType = 'wxpay';
				}
				if(this.payType == 2){
					payType = 'alipay'
				}
				if(this.payType==3){
					payType = 'money'
				}
				
				this.pay(payType);
				
				// return this.put_password();
				// this.$nav('/pagesUser/order/success')
			},
			put_password(){
				this.$refs.put_password.masks();
			},
			checkLogin(){
				this.$http(this.$api.checkLogin).then(res=>{
					if(res.code == 200){
						this.userInfo = res.data;
					}
				})
			},
			// 订单建立前预览商品信息
			create_order_before(){
				let obj = {...this.$api.orders}
				obj.url = obj.url+'/create_order_after'
				this.$http(obj,{params:this.params}).then(res=>{
					res.data.forEach(item=>{
						this.total += parseFloat(item.total_price);
						this.freight_money += parseFloat(item.freight_money);
						this.order_price += parseFloat(item.order_price);
						this.coupon_money += parseFloat(item.coupon_money);
					})
					this.order = res.data;                
				})
			},
			check(e){
				this.pay_password = e;
			},
			pay(payment_name){
				let apipayment_name = '';
				let paymentType = payment_name=='wxpay'?'wechat':'ali'
				if(payment_name != 'money'){
					apipayment_name = paymentType+'_h5'; // Api 使用的payment
					// 判断是否在app
					// #ifdef APP-PLUS
					apipayment_name = paymentType+'_app'
					// #endif
					
					// 是否是微信小程序
					// #ifdef MP-WEIXIN
					apipayment_name = paymentType+'_mini'
					// #endif
					
					// 是否是H5
					// #ifdef H5
					// 判断是否是微信游览器
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						apipayment_name = paymentType+'_public'
					}else{
						apipayment_name = paymentType+'_h5'
					}
					// #endif
				}else{
					apipayment_name = 'money'; // 
				}
				// console.log(payment_name,apipayment_name)
				let rawStr = Buffer.from(this.params,'base64').toString('utf-8')
				let params = JSON.parse(rawStr);
				let order_id = params.order_id.join(',');
				let sendData = {order_id:order_id,payment_name:apipayment_name};
				if(payment_name == 'money'){
					sendData.pay_password = this.pay_password;
				}
				
				let obj = {...this.$api.orders}
				obj.url = obj.url+'/pay'
				obj.method = 'post'
				
				this.$http(obj,sendData).then(res=>{
					if(res.code==200){
						if(apipayment_name != 'money'){
							// #ifdef APP-PLUS
							uni.requestPayment({
							    provider: payment_name,
							    orderInfo: res.data, //微信、支付宝订单数据
							    success: ()=> {
							        return this.$nav('/pagesUser/order/success');
							    },
							    fail: (err)=> {
							        this.$toast('fail:' + JSON.stringify(err));
							    }
							});
							// #endif
							// #ifdef MP
							uni.requestPayment({
							    provider: payment_name,
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
							    success: ()=> {
							        return this.$nav('/pagesUser/order/success');
							    },
							    fail: (err)=> {
							        this.$toast('fail:' + JSON.stringify(err));
							    }
							});
							// #endif
							// #ifdef H5
							return window.location.href=res.data;
							// #endif
						}
						return this.$nav('/pagesUser/order/success');
						
					}else{
						this.$toast(res.msg);
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
page{height: 100%;}
.order_pay{
	border-top: 1px solid #efefef;
	height: 100%;
	background-color: #fff;
	.price-box {
		background-color: #fff;
		height: 385rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #909399;
		.other_price{
			margin-top: 30rpx;
			display: flex;
			width: 100%;
			font-size: 24rpx;
			border-top:1px solid #f1f1f1;
			border-bottom:1px solid #f1f1f1;
			line-height: 80rpx;
			text{
				text-align: center;
				flex: 1;
				border-right: 1px solid #f1f1f1;
				&:last-child{
					border-right: none;
				}
			}
		}
		.price{
			font-size: 60rpx;
			color: #303133;
			margin-top: 32rpx;
			&:before{
				content: '￥';
				font-size: 40rpx;
			}
	
		}
	}
	
	.pay-type-list {
		margin-top: 20rpx;
		background-color: #fff;
		border-top: 1px solid #efefef;
		
		.type-item{
			height: 120rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60rpx;
			padding-left: 60rpx;
			font-size: 30rpx;
			position:relative;
			border-bottom: 1px solid #efefef;
		}
		
		.icon{
			width: 100rpx;
			font-size: 52rpx;
		}
		.qwpyqianbao {
			color: #fe8e2e;
		}
		.qwweixinzhifu {
			color: #36cb59;
		}
		.qwiconzhi01 {
			color: #01aaef;
		}
		.tit{
			font-size: $uni-font-size-lg;
			color: #333;
			margin-bottom: 4rpx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $uni-font-size-sm;
			color: #999;
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: $uni-font-size-lg;
		color: #fff;
		background-color: $uni-color-error;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(245, 70, 108, 0.4);
	}
}
</style>
